/**
* 核心指标
**/
<template>
    <div class="core-index-content ">
        <div class="device-content">
            <div class="title">
                <span class="span-1">核心指标</span>
                <!--<span class="span-2">激活率:xxxx</span>-->
                <!--<span class="span-3">设备活跃率:xxxx</span>-->
            </div>
            <div class="info-row">
                <el-row>
                    <el-col :span="4">
                        <div class="info-box">
                            <div class="info-item">
                                <span class="item-1">{{coreIndexData.plugin_entry_times || 0}}</span>
                                <span class="item-2">插件启动次数</span>
                            </div>
                            <div class="info-item">
                                <span class="item-1">{{coreIndexData.num_of_unique_users || 0}}</span>
                                <span class="item-2">插件启动用户数</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="info-box">
                            <div class="info-item">
                                <span class="item-1">{{coreIndexData.pluginNewLaunchUserCount || 0}}</span>
                                <span class="item-2">插件启动新增用户数</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="info-box">
                            <div class="info-item">
                                <span class="item-1" v-if="coreIndexData.Total_PV">{{coreIndexData.Total_PV}}</span>
                                <span class="item-2">总页面浏览量PV</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="info-box">
                            <div class="info-item">
                                <span class="item-1" v-if="coreIndexData.average_use_duration_by_user">{{coreIndexData.average_use_duration_by_user}}</span>
                                <span class="item-2">平均浏览时长</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="info-box" style="border: none">
                            <div class="info-item">
                                <span class="item-1" v-if="coreIndexData.active">时间段:{{coreIndexData.active
                                    .day_of_week}}</span>
                                <span class="item-1" v-if="coreIndexData.active">{{coreIndexData.active
                                    .hour_of_day}}次</span>
                                <span class="item-2">活跃情况</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  created () {
  },
  data () {
    return {}
  },
  props: {
    coreIndexData: {
      type: Object
    }
  },
  watch: {
    coreIndexData (now, old) {
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";
.core-index-content{
    @include device-content;
    .info-row{
        margin-top: 20px;
        .info-box{
            display: flex;
            flex-direction: column;
            border-right: 1px solid #DDE4EB;
            margin-right: 20px;
            height: 100px;
            justify-content: center;
            .info-item{
                display: flex;
                flex-direction: column;
                .item-1{
                    color: #2B80FF;
                    font-size: 20px;
                }
                .item-2{
                    color: #495463;
                    font-size: 12px;
                    margin-top: 5px;
                }
            }
            .info-item ~ .info-item{
                margin-top: 15px;
            }
        }
    }
}
</style>
